<!--
 * @Author: qiaoxin
 * @Date: 2024-04-10 16:02:27
 * @LastEditors: zll
 * @LastEditTime: 2024-08-21 16:40:05
 * @Description: 
 * @FilePath: \erp-app\src\pages\pm\projectStep\components\card.vue
-->
<template>
  <view class="card">
    <view class="main items-stretch" style="position: relative">
      <wd-card>
        <template #title>
          <view class="title_row flex left flex-1">
            <view class="title">{{ _D.demand_code }}</view>
          </view>
        </template>

        <view>
          <wd-row :gutter="15">
            <wd-col :span="is_big ? 12 : 24" class="row flex">
              <view class="col">
                <text class="label">需求类型：</text>
                <text class="text link" v-if="_D.cus_type == 0" @click="toDemandDetail(_D)">
                  客户需求单
                </text>
                <text class="text link" v-if="_D.cus_type == 1" @click="toDemandDetail(_D)">
                  非客户需求单
                </text>
                <text class="text link" v-if="_D.cus_type == 3" @click="toDemandDetail(_D)">
                  采购需求单
                </text>
              </view>
            </wd-col>

            <wd-col :span="is_big ? 12 : 24" class="row flex">
              <view class="col">
                <text class="label">产品名称：</text>
                <text class="text">{{ _D.inv_name || '' }}</text>
              </view>
            </wd-col>

            <wd-col :span="is_big ? 12 : 24" class="row flex flex-1">
              <view class="col">
                <text class="label">项目名称：</text>
                <text class="text">{{ _D.petition_name || '' }}</text>
              </view>
            </wd-col>
            <wd-col :span="is_big ? 12 : 24" class="row flex flex-1">
              <view class="col">
                <text class="label">需求人：</text>
                <text class="text">{{ _D.person_name || '' }}</text>
              </view>
            </wd-col>
            <wd-col :span="is_big ? 12 : 24" class="row flex">
              <view class="col">
                <text class="label">要求完成日期：</text>
                <text class="text">{{ _D.ask_complete_time }}</text>
              </view>
            </wd-col>
            <wd-col :span="is_big ? 12 : 24" class="row flex">
              <view class="col">
                <text class="label">进度状态：</text>
                <text class="text">
                  {{ _D.project_name }}
                </text>
              </view>
            </wd-col>

            <wd-col :span="is_big ? 12 : 24" class="row flex flex-1">
              <view class="col">
                <text class="label">需求评审状态：</text>
                <text class="text">
                  <wd-tag
                    :bg-color="getTaskFlag(_D.demandReviewStatus)['color']"
                    :color="getTaskFlag(_D.demandReviewStatus)['color']"
                    plain
                  >
                    {{ getTaskFlag(_D.demandReviewStatus)['label'] }}
                  </wd-tag>
                </text>
              </view>
            </wd-col>
            <!-- <wd-col :span="is_big ? 12 : 24" class="row flex flex-1">
              <view class="col">
                <text class="label">是否逾期：</text>

                <text class="text">
                  <wd-tag
                    :bg-color="getLateFlag(_D.lateFlag)['color']"
                    :color="getLateFlag(_D.lateFlag)['color']"
                    plain
                  >
                    {{ getLateFlag(_D.lateFlag)['label'] }}
                  </wd-tag>
                </text>
              </view>
            </wd-col> -->

            <wd-col :span="is_big ? 12 : 24" class="row flex">
              <view class="col">
                <text class="label">是否中止：</text>
                <text class="text">
                  <wd-tag
                    :bg-color="getZhongzhiFlag(_D.task_all_status).color"
                    :color="getZhongzhiFlag(_D.task_all_status).color"
                    plain
                  >
                    {{ getZhongzhiFlag(_D.task_all_status).label }}
                  </wd-tag>
                </text>
              </view>
            </wd-col>

            <!-- <wd-col :span="is_big ? 12 : 24" class="row flex">
              <view class="col">
                <text class="label">是否结题：</text>
                <text class="text">
                  <wd-tag
                    :bg-color="getJietiFlag(_D.task_all_status)['color']"
                    :color="getJietiFlag(_D.task_all_status)['color']"
                    plain
                  >
                    {{ getJietiFlag(_D.task_all_status)['label'] }}
                  </wd-tag>
                </text>
              </view>
            </wd-col> -->

            <wd-col :span="is_big ? 12 : 24" class="row flex">
              <view class="col">
                <text class="label">结题日期：</text>

                <text class="text">{{ _D.complete_time }}</text>
              </view>
            </wd-col>
            <wd-col :span="24" class="row flex">
              <view class="col">
                <text class="label">需求描述：</text>
                <text class="text">{{ _D.demand_desc || '' }}</text>
              </view>
            </wd-col>
            <!-- </view> -->
          </wd-row>
        </view>
      </wd-card>

      <wd-card class="flex-1">
        <template #title>
          <view class="title_row flex left flex-1" @click="_D.showContent = !_D.showContent">
            <view class="title flex-1">详情</view>
            <view class="icon"><wd-icon name="caret-down-small" size="22px"></wd-icon></view>
          </view>
        </template>

        <view v-show="_D.showContent">
          <wd-row :gutter="15">
            <wd-col :span="is_big ? 12 : 24" class="row flex">
              <view class="col flex">
                <view class="label">子任务进度：</view>
                <view
                  class="flex"
                  style="flex-wrap: wrap"
                  v-if="_D.projectStept && _D.projectStept.length"
                >
                  <view
                    style="margin-bottom: 16rpx"
                    v-for="(t, idx) in _D.projectStept"
                    :key="idx"
                    @click="toTaskDetail(t)"
                  >
                    <text class="text link">{{ formatText(t) }}</text>
                    <text class="text link" v-if="idx != _D.projectStept.length - 1">-></text>
                  </view>
                </view>
              </view>
            </wd-col>

            <wd-col :span="is_big ? 12 : 24" class="row flex">
              <view class="col flex">
                <text class="label">研发实验任务：</text>
                <view
                  class="flex"
                  style="flex-wrap: wrap"
                  v-if="_D.projectStep && _D.projectStep.length"
                >
                  <view v-for="(t, i) in _D.projectStep" :key="i" @click="toTaskDetail(t)">
                    <text class="text link">{{ formatText(t) }}</text>
                    <text class="text link" v-if="i != _D.projectStep.length - 1">-></text>
                  </view>
                </view>
              </view>
            </wd-col>
          </wd-row>

          <template v-if="_D.scheme && _D.scheme.length && _D.scheme.some((sc) => sc.scheme_no)">
            <scroll-view scroll-y scroll-x class="table-container" :style="{ height: 'auto' }">
              <view style="width: 100%; height: 100%">
                <table ref="table" class="table" bordered stripe emptyText="暂无更多数据">
                  <!-- 表头行 -->
                  <thead>
                    <tr>
                      <th :width="100" :align="'center'">
                        <view class="flex-row items-center sort_th">
                          <view class="th_name">方案</view>
                        </view>
                      </th>
                      <th :width="80">
                        <view class="flex-row items-center sort_th">
                          <view class="th_name">方案状态</view>
                        </view>
                      </th>
                      <th :width="100">
                        <view class="flex-row items-center sort_th">
                          <view class="th_name">记录编号</view>
                        </view>
                      </th>
                      <th :width="80">
                        <view class="flex-row items-center sort_th">
                          <view class="th_name">记录状态</view>
                        </view>
                      </th>
                      <th :width="100">
                        <view class="flex-row items-center sort_th">
                          <view class="th_name">报告编号</view>
                        </view>
                      </th>
                      <th :width="80">
                        <view class="flex-row items-center sort_th">
                          <view class="th_name">报告状态</view>
                        </view>
                      </th>
                    </tr>
                  </thead>
                  <!-- 表格数据行 -->
                  <tbody>
                    <block v-if="scheme.length">
                      <tr v-for="(item, rI) in scheme" :key="rI">
                        <td
                          align="center"
                          :width="100"
                          :rowspan="item.scheme_nospan"
                          :class="{ hidden: item.scheme_nodis }"
                        >
                          <!-- 方案 -->
                          {{ item.scheme_no }}
                        </td>
                        <td
                          :width="60"
                          align="center"
                          :rowspan="item.shcemeStatusspan"
                          :class="{ hidden: item.shcemeStatusdis }"
                        >
                          <text class="text" style="margin-left: 5rpx">
                            <wd-tag
                              :bg-color="getStatus(item.shcemeStatus)['color']"
                              :color="getStatus(item.shcemeStatus)['color']"
                              plain
                            >
                              {{ getStatus(item.shcemeStatus)['label'] }}
                            </wd-tag>
                          </text>
                        </td>
                        <!-- 记录 -->
                        <td :width="100" align="center">
                          <text class="text link" @click="toJiluDetail(item)">
                            {{ item.record_no }}
                          </text>
                        </td>
                        <td :width="60" align="center">
                          <text class="text" style="margin-left: 5rpx">
                            <wd-tag
                              :bg-color="getStatus(item.recordStatus)['color']"
                              :color="getStatus(item.recordStatus)['color']"
                              plain
                            >
                              {{ getStatus(item.recordStatus)['label'] }}
                            </wd-tag>
                          </text>
                        </td>
                        <!-- 报告 -->
                        <td :width="100" align="center">
                          <text class="text link" @click="toJiluDetail(item)">
                            {{ item.reportNo }}
                          </text>
                        </td>
                        <td :width="60" align="center">
                          <text class="text" style="margin-left: 5rpx">
                            <wd-tag
                              v-if="item.reportReviewStatus !== null"
                              :bg-color="getTaskFlag(item.reportReviewStatus)['color']"
                              :color="getTaskFlag(item.reportReviewStatus)['color']"
                              plain
                            >
                              {{ getTaskFlag(item.reportReviewStatus)['label'] }}
                            </wd-tag>
                            <text v-else></text>
                          </text>
                        </td>
                      </tr>
                    </block>

                    <block v-else>
                      <tr>
                        <td align="center" :colspan="options.column.length">暂无数据</td>
                      </tr>
                    </block>
                  </tbody>
                </table>
              </view>
            </scroll-view>
          </template>
        </view>
      </wd-card>

      <view style="position: absolute; top: -20rpx; right: -100rpx; width: 200rpx; height: 220rpx">
        <view>
          <wd-tag
            :bg-color="getJietiFlag(_D.task_all_status)['color']"
            :color="getJietiFlag(_D.task_all_status)['color']"
            plain
            style="font-size: 28rpx"
          >
            {{ getJietiFlag(_D.task_all_status)['label'] }}
          </wd-tag>
        </view>
        <view style="margin-top: 30rpx">
          <wd-tag
            :bg-color="getLateFlag(_D.lateFlag)['color']"
            :color="getLateFlag(_D.lateFlag)['color']"
            plain
            style="font-size: 28rpx"
          >
            {{ getLateFlag(_D.lateFlag)['label'] }}
          </wd-tag>
        </view>
        <!-- <view class="f1" style="width: 200rpx; height: 220rpx" v-if="_D.lateFlag == 1">
          <view class="r1" style="border-color: #f50"></view>
          <view class="r2" style="border-color: #f50"></view>
          <view class="w2" style="bordercolor: #f50; color: #f50">已逾期</view>
        </view>
        <view class="f1" style="width: 200rpx; height: 220rpx" v-if="_D.task_all_status == 2">
          <view class="r1" style="border-color: #87d068"></view>
          <view class="r2" style="border-color: #87d068"></view>
          <view class="w2" style="bordercolor: #87d068; color: #87d068">已结题</view>
        </view> -->
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
// import { getCurrentInstance } from 'vue';
import { formatByDayjs } from '@/utils/util';
import { submitProcess, revokeProcess, delObj } from '@/service/pm-requirement';
import { useDict } from '@/hooks/dict';
const emits = defineEmits(['refresh']);
const { appContext } = getCurrentInstance();
const props = defineProps({
  _D: {
    type: Object,
    default: () => {},
  },
  showFooter: {
    type: Boolean,
    default: false,
  },
  from: {
    type: String,
    default: '',
  },
  page: {
    type: String,
    default: '/pages/pm/requirement/detail',
  },
  isOpt: {
    type: Boolean,
    default: false,
  },
  isPreview: {
    type: String,
    default: '0',
  },
});
let scheme = ref([]);
watch(
  () => props._D,
  (val) => {
    if (val && Object.keys(val).length) {
      if (val.scheme && val.scheme.length) {
        val.scheme.map((item) => {
          if (item.record && item.record.length) {
            item.record.map((it) => {
              scheme.value.push(it);
              return it;
            });
          } else {
            scheme.value.push(item);
          }
          return item;
        });
      }
      combineCell();
    }
  },
  { immediate: true },
);
onShow(() => {
  uni.onWindowResize((e) => {
    console.log(e.size.windowWidth);

    if (e?.size.windowWidth > 546) {
      is_big.value = true;
    } else {
      is_big.value = false;
    }
  });
});
const column = ref([
  {
    title: '当前环节',
    field: 'activityName',
    align: 'center',
    minWidth: 220,
  },
  {
    title: '处理人',
    field: 'assigneeName',
    align: 'center',
    minWidth: 200,
  },
  {
    title: '任务开始时间',
    field: 'startDate',
    align: 'center',
    minWidth: 200,
  },
  {
    title: '任务结束时间',
    field: 'endDate',
    align: 'center',
    minWidth: 200,
  },
  {
    title: '审批意见',
    field: 'comment',
    align: 'center',
    minWidth: 200,
  },
  {
    title: '任务时长',
    field: 'duration',
    align: 'center',
    minWidth: 200,
  },
]);

// 合并
function combineCell() {
  const list = scheme.value;
  for (let field in list[0]) {
    var k = 0;
    while (k < list.length) {
      list[k][field + 'span'] = 1;
      list[k][field + 'dis'] = false;
      for (var i = k + 1; i <= list.length - 1; i++) {
        if (list[k]['scheme_no'] == list[i]['scheme_no'] && list[k]['scheme_no'] != '') {
          list[k][field + 'span']++;
          list[k][field + 'dis'] = false;
          list[i][field + 'span'] = 1;
          list[i][field + 'dis'] = true;
        } else {
          break;
        }
      }
      k = i;
    }
  }
  return list;
}
let is_big = ref(false);
const isClicking = ref(false);
const toDemandDetail = (row) => {
  // id=1823889449034940417&cusFlag=3&t=1724033639077&tagsViewName=编辑采购需求单
  const t = new Date().getTime();
  let title = '采购需求单详情';
  if (row.cus_type == 0) {
    title = '客户需求单';
  }
  if (row.cus_type == 1) {
    title = '非客户需求单';
  }
  const path = row.cus_type == 3 ? '/pages/pm/gongying/form' : '/pages/pm/requirement/form';
  uni.navigateTo({
    url: `${path}?id=${row.id_demand}&cusFlag=${row.cus_type}&demandCode=${row.demand_code}&isPreview=1`,
    // query: {
    //   id: row.id_demand,
    //   cusFlag: row.cus_type,
    //   demandCode: row.demand_code,
    //   t,
    //   isPreview: 1,
    //   tagsViewName: title,
    // },
  });
  // router.push({
  //   path,
  //   query: {
  //     id: row.id_demand,
  //     cusFlag: row.cus_type,
  //     demandCode: row.demand_code,
  //     t,
  //     isPreview: 1,
  //     tagsViewName: title,
  //   },
  // });
};
const toFanganDetail = (row) => {
  // if (!row.id_scheme) return;
  // const t = new Date().getTime();
  // let title = '查看实验方案';
  // const path = '/pages/pm/experiment/scheme/form';
  // uni.navigateTo({
  //   url: `${path}?id=${row.id_scheme}&isPreview=1`,
  // });
};

const toJiluDetail = (row) => {
  // pm/experiment/scheme/form?id=1824274541000998913&tagsViewName=查看实验方案&t=1724035228697
  if (!row.id_record) return;
  const t = new Date().getTime();
  let title = '查看实验记录';

  const path = '/pages/pm/experiment/record/form';
  uni.navigateTo({
    url: `${path}?id=${row.id_record}&isPreview=1`,
  });
};
const toTaskDetail = (e) => {
  const arr = e.split(',');
  const taskId = arr.length >= 2 ? arr[1] : '';

  if (!taskId) return;

  const path = '/pages/pm/task/form';
  uni.navigateTo({
    url: `${path}?id=${taskId}&isPreview=1`,
  });
};
const toBaogaoDetail = (row) => {
  if (!row.id_report) return;

  const path = '/pages/pm/report/view';
  uni.navigateTo({
    url: `${path}?id=${row.id_report}&isPreview=1`,
  });
};
const getLateFlag = (status) => {
  const list = [
    {
      value: '0',
      label: '未逾期',
      color: '#39b54a',
    },
    {
      value: '1',
      label: '已逾期',
      color: '#f50',
    },
  ];
  const o = list.find((item) => item.value == status);

  return o
    ? o
    : {
        label: '未逾期',
        color: '#f50',
      };
};
const getZhongzhiFlag = (status) => {
  const list = [
    {
      value: '1',
      label: '否',
      color: '#f50',
    },
    {
      value: '2',
      label: '否',
      color: '#f50',
    },
    {
      value: '4',
      label: '否',
      color: '#f50',
    },
    {
      value: '5',
      label: '否',
      color: '#f50',
    },
    {
      value: '3',
      label: '是',
      color: '#39b54a',
    },
  ];
  return (
    list.find((item) => item.value == status) || {
      label: '暂无数据',
      color: '#108ee9',
    }
  );
};
const getJietiFlag = (status) => {
  const list = [
    {
      value: '1',
      label: '未结题',
      color: '#f50',
    },
    {
      value: '3',
      label: '未结题',
      color: '#f50',
    },
    {
      value: '4',
      label: '未结题',
      color: '#f50',
    },
    {
      value: '5',
      label: '未结题',
      color: '#f50',
    },
    {
      value: '2',
      label: '结题',
      color: '#39b54a',
    },
  ];
  return (
    list.find((item) => item.value == status) || {
      label: '暂无数据',
      color: '#108ee9',
    }
  );
};
const statusList = [
  {
    text: '未提交',
    value: '0',
    color: '#108ee9',
  },
  {
    text: '审批中',
    value: '1',
    color: '#d46b08',
  },
  {
    text: '已审核',
    value: '2',
    color: '#39b54a',
  },
  {
    text: '拒绝',
    value: '3',
    color: '#f50',
  },
  {
    text: '撤回',
    value: '9',
    color: '#f50',
  },
];

const { bill_status } = useDict('bill_status');
const { review_status } = useDict('review_status');

const getStatus = (status) => {
  if (status == null)
    return {
      label: '未提交',
      value: '0',
      color: '#108ee9',
    };
  const o1 = statusList.find((item) => item.value == status);
  const o = bill_status.value.find((item) => item.value == status);
  return o
    ? {
        ...o,
        color: o1['color'],
      }
    : { label: status };
};

const show = ref(false);
const actions = ref([
  {
    name: '详情',
  },
]);
const formatText = (item) => {
  // 不包括开始和结束
  let matchReg = /(?<=\().*?(?=\))/;
  const de_code =
    item.match(matchReg) && item.match(matchReg).length ? item.match(matchReg)[0] : '';
  // 包括开始和结束
  const title = item.replace(/\(.*?\)/g, ' ');

  return title;
};
function close() {
  show.value = false;
}
const setProject = (row) => {
  if (!row.all_task) return;
  const arr = row.all_task.split('->').filter((item) => {
    let matchReg = /(?<=\().*?(?=\))/;
    const de_code =
      item.match(matchReg) && item.match(matchReg).length ? item.match(matchReg)[0] : '';
    // 包括开始和结束
    const title = item.replace(/\(.*?\)/g, ' ');
    const type = de_code.split(',') && de_code.split(',').length > 2 ? de_code.split(',')[2] : '';
    return type != 10 && type != 11;
  });
  return arr.map((item, index) => {
    // 不包括开始和结束
    let matchReg = /(?<=\().*?(?=\))/;
    const de_code =
      item.match(matchReg) && item.match(matchReg).length ? item.match(matchReg)[0] : '';
    // 包括开始和结束
    const title = item.replace(/\(.*?\)/g, ' ');

    // return (
    //   <>
    //     <a-button style='padding:5px 0' type="link" onClick={() => toDetail(row, de_code, title)}>
    //       {title}
    //     </a-button>
    //     {index != arr.length - 1 && <span style='color: #2e5cf6;'>-></span>}
    //   </>
    // );
  });
  // return <>{html}</>;
};
const select = (e) => {
  const name = e.item.name;
  if (name == '修改') {
    uni.navigateTo({
      url: '/pages/pm/requirement/form?id=' + props._D.id,
    });
  } else if (name == '详情') {
    uni.navigateTo({
      url: props.page + '?id=' + props._D.id + '&isDetail=1',
    });
  } else if (name == '提交') {
    uni.showModal({
      title: '提示',
      content: '是否提交该单据',
      showCancel: true,
      success: ({ confirm, cancel }) => {
        if (cancel) {
          return;
        }
        submitProcess(props._D.id).then((res) => {
          uni.showToast({
            mask: true,
            title: `单据${props._D.demandCode}提交成功`,
          });
          emits('refresh');
        });
      },
    });
  } else if (name == '撤回') {
    uni.showModal({
      title: '提示',
      content: '是否撤回该单据',
      showCancel: true,
      success: ({ confirm, cancel }) => {
        if (cancel) {
          return;
        }
        revokeProcess({
          id: props._D.id,
          instanceId: props._D.instanceId,
        }).then((res) => {
          uni.showToast({
            mask: true,
            title: `单据${props._D.demandCode}撤回成功`,
          });
          emits('refresh');
        });
      },
    });
  } else if (name == '删除') {
    uni.showModal({
      title: '提示',
      content: '是否删除该单据',
      showCancel: true,
      success: ({ confirm, cancel }) => {
        if (cancel) {
          return;
        }
        delObj([props._D.id]).then((res) => {
          uni.showToast({
            mask: true,
            title: `单据${props._D.demandCode}删除成功`,
          });
          emits('refresh');
        });
      },
    });
  }
};

const getRdFlag = (RdFlag) => {
  const RdFlagList = [
    {
      text: '',
      value: null,
      color: '#108ee9',
    },
    {
      text: '不通过',
      value: '0',
      color: '#f50',
    },
    {
      text: '通过',
      value: '1',
      color: '#39b54a',
    },
  ];
  const o = RdFlagList.find((item) => item.value == RdFlag);
  return o ? o : { text: RdFlag };
};

const getTaskFlag = (taskFlag) => {
  const taskflagList = [
    {
      label: '',
      value: null,
      color: '',
    },
    {
      label: '未提交',
      value: '0',
      color: '#108ee9',
    },
    {
      label: '待评审',
      value: '1',
      color: '#108ee9',
    },
    {
      label: '通过',
      value: '2',
      color: '#39b54a',
    },
    {
      label: '不通过',
      value: '3',
      color: '#f50',
    },
    {
      label: '已终止',
      value: '4',
      color: '#f50',
    },
  ];

  const o1 = taskflagList.find((item) => item.value == taskFlag);
  const o = review_status.value.find((item) => item.value == taskFlag);
  return o
    ? {
        ...o,
        color: o1['color'],
      }
    : { label: taskFlag };
};
</script>

<style scoped lang="scss">
.card {
  padding: 24rpx 20rpx;
  margin-bottom: 30rpx;
  overflow: hidden;
  background: #fff;
  border-radius: 15rpx;
  /* box-shadow: 0 15rpx 10rpx 0 #f7f7f7; */
}
.hidden {
  display: none;
}
.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.main {
  .title_row {
    align-items: flex-start;
    overflow: hidden;
    position: relative;
    .title {
      padding-left: 16rpx;
      &::before {
        content: '';
        // display: inline-block;
        // width: 10rpx;
        height: 30rpx;
        // margin-right: 10rpx;
        position: absolute;
        top: 5rpx;
        // bottom: 2rpx;
        left: 0;
        width: 8rpx;
        background-color: #2e5cf6;
      }
    }
  }

  .title {
    flex: 1;
    margin-bottom: 32rpx;
    overflow: hidden;
    font-size: 32rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .row {
    align-items: flex-start;
    margin-bottom: 24rpx;

    .col {
      display: flex;
      flex: 1;
      min-width: 45%;
      line-height: 28rpx;

      ~ .col {
        margin-left: 12rpx;
      }

      .label {
        flex-shrink: 0;
        width: 200rpx;
        font-size: 26rpx;
        color: #888;
        &.small {
          width: 120rpx;
        }
      }

      .text {
        font-size: 28rpx;
        color: #000;
        white-space: normal;
        word-break: break-all;
        &.link {
          color: #108ee9;
        }
      }
    }
  }

  .left {
    overflow: hidden;
  }

  .right {
    flex-shrink: 0;
    margin-left: 12rpx;
    font-size: 24rpx;
    color: #666;
  }
}

.footer {
  position: relative;
  align-items: center;
  justify-content: space-between;
  padding-top: 24rpx;
  font-size: 24rpx;
  color: #666;

  &::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1rpx;
    content: '';
    background-color: #f3f3f3;
  }

  .unit ~ .unit {
    margin-left: 18rpx;
  }

  .action {
    position: relative;
    right: -24rpx;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    padding: 6rpx 24rpx;
    font-size: 26rpx;

    .btn {
      padding: 6rpx 12rpx;

      ~ .btn {
        margin-left: 16rpx;
      }
    }

    .primary {
      color: #007aff;
    }

    .danger {
      color: #f56c6c;
    }
  }
  /* // .action {
        // 	padding: 6rpx 0 6rpx;
        // 	font-size: 26rpx;
        // 	color: #007aff;
        // } */
}

:deep(.wd-tag__text) {
  padding: 2rpx 4rpx !important;

  // font-size: 28rpx !important;
}
:deep(.wd-card__footer) {
  padding: 0 !important;
  height: 0;

  // font-size: 28rpx !important;
}
.mt30 {
  margin-top: 30rpx;
}

.table-container {
  width: 100%;
  background: #fff;
}

.table {
  border-collapse: collapse;
  width: 100%;
  min-width: 1100px;
  font-size: 0.875rem;
  font-weight: initial;
  background: #fff;
  border-color: #f7f77f7;
  margin: auto;

  tbody {
    tr {
      &:nth-child(2n) {
        background: #f3f3f3;
      }
    }
  }

  thead {
    // tr{
    // 	position:sticky;
    // 	top:0;
    // 	z-index: 10;
    // }
  }

  th {
    box-sizing: border-box;
    min-width: 120rpx;
    padding: 10rpx;
    height: 88rpx;
    min-width: 80rpx;
    position: relative;
    // &.stricky {
    position: sticky;
    top: -1px;
    z-index: 10;
    // }
    // position:sticky;
    // top:0;
    // z-index: 10;
    // font-size: 0.875rem;
    // font-weight: initial;
    // white-space: pre-line;
    // word-break: break-all;
    // border: 1rpx solid #666;
    border: 1rpx solid #dedede;
    // border: none;
    background-color: #f7f7f7;
    color: #777;

    &[align='center'] {
      text-align: center;
    }

    &[align='left'] {
      text-align: left;
    }

    &[align='right'] {
      text-align: right;
    }
  }

  td {
    box-sizing: border-box;
    padding: 10rpx;
    height: 88rpx;
    min-width: 80rpx;
    position: relative;
    font-size: 0.875rem;
    white-space: normal;
    word-break: break-all;
    // border: 1rpx solid #666;
    border: 1rpx solid #dedede;

    &[align='center'] {
      text-align: center;
    }

    &[align='left'] {
      text-align: left;
    }

    &[align='right'] {
      text-align: right;
    }

    &.danger {
      color: #f56c6c;
    }

    textarea {
      width: auto;
      font-size: 0.875rem;
    }

    input {
      font-size: 0.875rem;
    }

    .more-text {
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      display: -webkit-box;
    }

    .link {
      color: #007aff;
    }
  }
}

.f1 {
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.r1 {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border: 4rpx solid;
  border-radius: 100%;
  clip-path: polygon(80% 0%, 2% 100%, 0% -3600%, 17% 100%, 89% 96%);
}
.r2 {
  top: 20rpx;
  left: 20rpx;
  right: 20rpx;
  bottom: 20rpx;
  position: absolute;
  border: 2rpx solid;
  border-radius: 100%;
  clip-path: polygon(60% 100%, 0% 100%, 0 -3600%, 10% 10%);
}
.w2 {
  width: calc(100%);
  height: calc(100%);
  position: absolute;
  // top: 13%;
  // left: 23%;
  font-size: 24rpx;
  transform: rotate(57deg);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}
</style>
